<template>
  <div class="pop-science">
    <div class="content">
      <RecycleScroller
        class="scroller"
        :items="list"
        :item-size="210"
        key-field="id"
        v-slot="{ item }"
      >
        <div class="user">
          <img style="width: 100px; height: 200px" :src="item.avatar" alt="" />
          {{ item.name }}
        </div>
      </RecycleScroller>
    </div>
    <div ref="boxRef" class="loading">...</div>

    <!-- <div class="content">
      <ul v-for="item in this.list" :key="item.id">
        <li>
          <img style="width: 100px; height: 100px" :src="item.avatar" alt="" />
        </li>
        <li>{{ item.id }}:{{ item.name }}</li>
      </ul>
      <div ref="boxRef" class="loading">...</div>
    </div> -->
  </div>
</template>
<script>
const createData = ({ page = 1, size = 5 }) => {
  let arr = [];
  return new Promise((resolve, reject) => {
    for (let i = 0; i < 1000; i++) {
      arr.push({
        id: i + 1,
        name: `city: ${i + 1} week`,
        avatar: `https://www.robohash.org/${i}`,
      });
    }
    setTimeout(() => {
      resolve(arr.slice((page - 1) * size, page * size));
    }, 500);
    // page * size
    // page - 1 * size
  });
};

export default {
  data() {
    return {
      list: [],
      pageOpt: {
        page: 1,
        size: 10,
      },
      loading: false,
      boxRef: "",
    };
  },
  created() {},
  mounted() {
    this.getData({});
    console.log("this.$refs:", this.$refs.boxRef);
  },
  methods: {
    async getData({ page = this.pageOpt.page }) {
      // 出现loading
      this.loading = true;
      let data = await createData({ page });
      this.loading = false;
      this.list = this.list.concat(data);
      // console.log("this.list:", this.list);
      // await nextTick();
      this.handleObserver();
    },
    handleObserver() {
      const callback = (entries) => {
        console.log(
          "entries[0].intersectionRatio:",
          entries[0].intersectionRatio
        );
        if (entries[0].intersectionRatio <= 0) return;
        if (!this.loading && entries[0].isIntersecting) {
          console.log("进入视图：", entries[0].isIntersecting);
          this.pageOpt.page++;
          this.getData({ page: this.pageOpt.page });
        }
      };

      const io = new IntersectionObserver(callback, {
        threshold: [1],
      });

      // 开始观察
      if (this.$refs.boxRef) {
        io.observe(this.$refs.boxRef);
      }

      // // 停止观察
      // io.unobserve(boxRef.value)
      // // 关闭观察器
      // io.disconnect()
    },
  },
};

// export default defineComponent({
//   setup(props, context) {
//     const this = reactive<thisProps>({
//       list: [],
//       pageOpt: {
//         page: 1,
//         size: 10
//       },
//       loading: false
//     })
//     const boxRef = ref<HTMLElement | null>(null)

//     onMounted(() => {
//       getData({})
//     })

//     const handleObserver = () => {
//       const callback = (entries) => {
//         console.log(
//           'entries[0].intersectionRatio:',
//           entries[0].intersectionRatio
//         )
//         if (entries[0].intersectionRatio <= 0) return
//         if (!this.loading && entries[0].isIntersecting) {
//           console.log('进入视图：', entries[0].isIntersecting)
//           this.pageOpt.page++
//           getData({ page: this.pageOpt.page })
//         }
//       }

//       const io = new IntersectionObserver(callback, {
//         threshold: [1]
//       })

//       // 开始观察
//       if (boxRef.value) {
//         io.observe(boxRef.value)
//       }

//       // // 停止观察
//       // io.unobserve(boxRef.value)
//       // // 关闭观察器
//       // io.disconnect()
//     }

//     const getData = async ({ page = this.pageOpt.page }) => {
//       // 出现loading
//       this.loading = true
//       let data = await createData({ page })
//       this.loading = false
//       this.list = this.list.concat(data)
//       console.log('this.list:', this.list)
//       await nextTick()
//       handleObserver()
//     }
//     return {
//       this,
//       boxRef
//     }
//   }
// })
</script>
<style scoped lang="scss">
.pop-science {
  width: 100%;
  height: 100%;
  overflow: auto;
  scroll-behavior: smooth;
}
.loading {
  margin: 10px auto;
  background: #ccc;
  text-align: center;
  line-height: 15px;
  width: 25px;
  height: 25px;
  animation: circle 1s linear infinite;
  transform-origin: 50% 50%; // 定义动画的旋转中心点
}
@keyframes circle {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
